import React, {Component, Fragment} from 'react';
import {Table, Input} from 'antd';
import "./UpperPartOfTheForm.css"
import moment from 'moment'
import 'antd/dist/antd.css';
import './KongZhiShiYSJL.css'
import "./BottomPartOfTheForm.css"

//上半部分表格
class UpperPartOfTheForm extends Component {

    constructor(props) {
        super(props);
        this.state = {
            Time: [],//第一列的时间变化自动控制
            Data: this.props.upperData,//原始填写的数据
            average: [null, null, null, null, null, null, null, null, null],//平均
            ratio: [null, null, null, null, null, null, null, null, null],//比值
            passRate: [null, null, null, null, null, null, null, null, null],//合格率
            isNomal: [],
            person: this.props.person,
            standard: this.props.standard
        }
    }

    componentWillMount() {
        const allTime = [
            ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00'],
            ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
            ['16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
        ];
        this.setState({
            Time: [...allTime[this.props.timeChose]],
            Data: this.props.upperData,
        });
        this.updataData_Initial(this.props.standard);
    }

    componentWillReceiveProps(nextProps) {
        // console.log(nextProps)
        const allTime = [
            ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00'],
            ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
            ['16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
        ];
        this.setState({
            Time: [...allTime[nextProps.timeChose]],
            Data: nextProps.upperData,
        });
        this.updataData_Initial(nextProps.standard);
    }

    /*计算平均值、合格率、是否正常、并且去除数组中的空位 */
    updataData_Initial(standard) {
        let temp1 = 0;//计算均值和合格率的临时数据
        let temp2 = 0;
        let temp3 = 0;
        let str = '';//计算合格比率的临时数据
        let inputCount0 = [], inputCount8 = [], inputCount16 = [];//各班次输入的总数
        let passCount0 = [], passCount8 = [], passCount16 = [];//各班次的合格数
        let passRate0 = [], passRate8 = [], passRate16 = [];//各班次的合格率
        let ratio0 = [], ratio8 = [], ratio16 = [];//各班次的合格比率
        const Data = this.state.Data;
        //计算合格率部分
        for (let i = 0; i < 9; i++) {//i是列
            inputCount0[i] = 0;//0点班输入的总数
            passCount0[i] = 0;//0点班合格数
            inputCount8[i] = 0;//8点班输入的总数
            passCount8[i] = 0;//8点班合格数
            inputCount16[i] = 0;//16点班输入的总数
            passCount16[i] = 0;//16点班合格数
            for (let j = 0; j <= 7; j++) {//j是行
                if (!isNaN(Data[j]['shuju'][i]) && (Data[j]['shuju'][i] != null)) {
                    inputCount0[i]++;
                    if (Data[j]['shuju'][i] <= standard[i]) {
                        passCount0[i]++;
                    }
                }
                if (inputCount0[i] === 0) {
                    str = null;
                    temp1 = null;
                }
                else {
                    str = passCount0[i] + '\/' + inputCount0[i];
                    if (isNaN(temp1 = passCount0[i] / inputCount0[i])) {
                        temp1 = null;
                    }
                    else {
                        temp1 = Number(temp1 * 100).toFixed(1) + '%';
                    }
                }
                ratio0[i] = str;
                passRate0[i] = temp1;
            }
            for (let j = 8; j <= 15; j++) {//j是行
                if (!isNaN(Data[j]['shuju'][i]) && (Data[j]['shuju'][i] != null)) {
                    inputCount8[i]++;
                    if (Data[j]['shuju'][i] <= standard[i]) {
                        passCount8[i]++;
                    }
                }
                if (inputCount8[i] === 0) {
                    str = null;
                    temp1 = null;
                }
                else {
                    str = passCount8[i] + '\/' + inputCount8[i];
                    if (isNaN(temp1 = passCount8[i] / inputCount8[i])) {
                        temp1 = null;
                    }
                    else {
                        temp1 = Number(temp1 * 100).toFixed(1) + '%';
                    }
                }
                ratio8[i] = str;
                passRate8[i] = temp1;
            }
            for (let j = 16; j <= 23; j++) {//j是行
                if (!isNaN(Data[j]['shuju'][i]) && (Data[j]['shuju'][i] != null)) {
                    inputCount16[i]++;
                    if (Data[j]['shuju'][i] <= standard[i]) {
                        passCount16[i]++;
                    }
                }
                if (inputCount16[i] === 0) {
                    str = null;
                    temp1 = null;
                }
                else {
                    str = passCount16[i] + '\/' + inputCount16[i];
                    if (isNaN(temp1 = passCount16[i] / inputCount16[i])) {
                        temp1 = null;
                    }
                    else {
                        temp1 = Number(temp1 * 100).toFixed(1) + '%';
                    }
                }
                ratio16[i] = str;
                passRate16[i] = temp1;
            }
            let ratio = ratio0.concat(ratio8);
            ratio = ratio.concat(ratio16);
            let passRate = passRate0.concat(passRate8);
            passRate = passRate.concat(passRate16);
            this.setState({
                ratio: ratio,
                passRate: passRate,
            });
        }
        // console.log(this.state.ratio)
        // console.log(this.state.passRate)
        //计算均值的部分
        let average0 = [], average8 = [], average16 = [];//各班次的合格率
        for (let i = 0; i < 9; i++) {
            temp1 = 0;
            temp2 = 0;
            temp3 = 0;
            if (inputCount0[i] === 0) {
                temp1 = null;
            }
            else {
                for (let j = 0; j < 8; j++) {
                    if (!isNaN(Data[j]['shuju'][i])) {
                        temp1 += Data[j]['shuju'][i];
                    }
                }
                if (isNaN(temp1 = temp1 / inputCount0[i])) {
                    temp1 = 0;
                }
                temp1 = temp1.toFixed(3);
            }
            average0[i] = temp1;
            if (inputCount8[i] === 0) {
                temp2 = null;
            }
            else {
                for (let j = 8; j < 16; j++) {
                    if (!isNaN(Data[j]['shuju'][i])) {
                        temp2 += Data[j]['shuju'][i];
                    }
                }
                if (isNaN(temp2 = temp2 / inputCount8[i])) {
                    temp2 = 0;
                }
                temp2 = temp2.toFixed(3);
            }
            average8[i] = temp2;
            if (inputCount16[i] === 0) {
                temp3 = null;
            }
            else {
                for (let j = 16; j < 24; j++) {
                    if (!isNaN(Data[j]['shuju'][i])) {
                        temp3 += Data[j]['shuju'][i];
                    }
                }
                if (isNaN(temp3 = temp3 / inputCount16[i])) {
                    temp3 = 0;
                }
                temp3 = temp3.toFixed(3);
            }
            average16[i] = temp3;
        }
        let average = average0.concat(average8);
        average = average.concat(average16);
        this.setState({
            average: average
        });
        //是否正常的更新部分
        let newNormal = [];
        for (let i = 0; i < 24; i++) {
            if (!isNaN(Data[i]['shuju'][0]) && (Data[i]['shuju'][0] != null)) {
                if (Data[i]['shuju'][0] <= standard[0]) {
                    newNormal[i] = '正常';
                }
                else {
                    newNormal[i] = '问题';
                }
            }
            else {
                newNormal[i] = '';
            }
        }
        this.setState({
            isNormal: newNormal
        })
    }


    render() {

        // 表头
        const columns = [
            {
                title: '时间',
                key: 'time',
                dataIndex: 'time',
                fixed: 'left',
                width: 100
            },
            {
                title: '熟料',
                dataIndex: 'ShuL',
                key: 'ShuL',
                children: [{
                    title: 'FCaO/%',
                    key: 'FCaO',
                    dataIndex: 'FCaO',
                    render: (value, row, index) => {
                        const obj = {
                            children: value,
                            props: {}
                        };
                        if (index === 9) {
                            obj.props.colSpan = 2;
                        }
                        if (index === 10) {
                            obj.props.colSpan = 2;
                        }
                        if (index === 11) {
                            obj.props.colSpan = 2;
                        }
                        return obj;
                    },
                }, {
                    title: '是否正常',
                    key: 'IsNormal',
                    dataIndex: 'IsNormal',
                    render: (value, row, index) => {
                        const obj = {
                            children: value,
                            props: {}
                        };
                        if (index === 9) {
                            obj.props.colSpan = 0
                        }
                        if (index === 10) {
                            obj.props.colSpan = 0;
                        }
                        if (index === 11) {
                            obj.props.colSpan = 0;
                        }
                        return obj;
                    },
                }
                ],

            },
            {
                title: '出磨生料',
                key: 'Chu',
                children: [
                    {
                        title: '细度/um',
                        key: 'ChuFineness',
                        dataIndex: 'ChuFineness'
                    },
                    {
                        title: '900孔',
                        key: 'Chu900',
                        dataIndex: 'Chu900'
                    },
                    {
                        title: '水分',
                        key: 'ChuWater',
                        dataIndex: 'ChuWater'
                    }
                ],
            },
            {
                title: '入磨生料',
                key: 'Ru',
                children: [
                    {
                        title: '细度/um',
                        key: 'RuFineness',
                        dataIndex: 'RuFineness'
                    },
                    {
                        title: '900孔',
                        key: 'Ru900',
                        dataIndex: 'Ru900'
                    },
                    {
                        title: '水分',
                        key: 'RuWater',
                        dataIndex: 'RuWater'
                    }
                ],
            },
            {
                title: '煤粉',
                key: 'Coal',
                children: [
                    {
                        title: '细度/um',
                        key: 'CoalFineness',
                        dataIndex: 'CoalFineness'
                    },
                    {
                        title: '水分',
                        key: 'CoalWater',
                        dataIndex: 'CoalWater'
                    }
                ],
            },
            {
                title: '人员',
                key: 'person',
                render: (value, row, index) => {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 9) {
                        obj.props.rowSpan = 3;
                    }
                    if (index === 10) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 11) {
                        obj.props.rowSpan = 0;
                    }

                    return obj;
                },
            }
        ];

        /**第一行里的标准**start**/
        const data = [
            {
                time: '指标',
                FCaO: '≤' + this.props.standard[0],
                ChuFineness: '≤' + this.props.standard[1],
                Chu900: '≤' + this.props.standard[2],
                ChuWater: '≤' + this.props.standard[3],
                RuFineness: '≤' + this.props.standard[4],
                Ru900: '≤' + this.props.standard[5],
                RuWater: '≤' + this.props.standard[6],
                CoalFineness: '≤' + this.props.standard[7],
                CoalWater: '≤' + this.props.standard[8]
            }

        ];
        /**第一行里的标准**end**/

            //中间八行的数据输入
        const Data = this.state.Data;
        for (let i = 0; i < 8; i++) {
            const xiaoshi = this.props.timeChose * 8;
            const value = Data[i + xiaoshi]['shuju'];
            data.push(
                {
                    time: this.state.Time[i],
                    FCaO: isNaN(value[0]) ? null : value[0] + '%',
                    IsNormal: this.state.isNomal[i],
                    ChuFineness: isNaN(value[1]) ? null : value[1] + '%',
                    Chu900: isNaN(value[2]) ? null : value[2] + '%',
                    ChuWater: isNaN(value[3]) ? null : value[3] + '%',
                    RuFineness: isNaN(value[4]) ? null : value[4] + '%',
                    Ru900: isNaN(value[5]) ? null : value[5] + '%',
                    RuWater: isNaN(value[6]) ? null : value[6] + '%',
                    CoalFineness: isNaN(value[7]) ? null : value[7] + '%',
                    CoalWater: isNaN(value[8]) ? null : value[8] + '%',
                    person: Data[i + xiaoshi]['name']
                }
            )
        }


        /**数据的自动处理显示部分**start**/
        const xiaoshi = this.props.timeChose * 9;
        data.push(
            {
                time: '平均',
                FCaO: this.state.average[xiaoshi],
                ChuFineness: this.state.average[1 + xiaoshi],
                Chu900: this.state.average[2 + xiaoshi],
                ChuWater: this.state.average[3 + xiaoshi],
                RuFineness: this.state.average[4 + xiaoshi],
                Ru900: this.state.average[5 + xiaoshi],
                RuWater: this.state.average[6 + xiaoshi],
                CoalFineness: this.state.average[7 + xiaoshi],
                CoalWater: this.state.average[8 + xiaoshi]

            }, {
                time: '总合格数\/总数',
                FCaO: this.state.ratio[xiaoshi],
                ChuFineness: this.state.ratio[1 + xiaoshi],
                Chu900: this.state.ratio[2 + xiaoshi],
                ChuWater: this.state.ratio[3 + xiaoshi],
                RuFineness: this.state.ratio[4 + xiaoshi],
                Ru900: this.state.ratio[5 + xiaoshi],
                RuWater: this.state.ratio[6 + xiaoshi],
                CoalFineness: this.state.ratio[7 + xiaoshi],
                CoalWater: this.state.ratio[8 + xiaoshi]

            }, {
                time: '合格率',
                FCaO: this.state.passRate[xiaoshi],
                ChuFineness: this.state.passRate[1 + xiaoshi],
                Chu900: this.state.passRate[2 + xiaoshi],
                ChuWater: this.state.passRate[3 + xiaoshi],
                RuFineness: this.state.passRate[4 + xiaoshi],
                Ru900: this.state.passRate[5 + xiaoshi],
                RuWater: this.state.passRate[6 + xiaoshi],
                CoalFineness: this.state.passRate[7 + xiaoshi],
                CoalWater: this.state.passRate[8 + xiaoshi]
            }
        );
        /**数据的自动处理显示部分**end**/


        return (
            <div className="upper">
                {/*表格填写*/}
                <Table className="upper" style={this.props.style} columns={columns} bordered dataSource={data}
                       pagination={false}/>
            </div>
        );
    }

}


//下半部分表格
class BottomPartOfTheForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Data: this.props.bottomData,
            timeChose: this.props.timeChose,
            weightAverage: []//平均立升重
        }
    }

    componentWillReceiveProps(nextProps) {

        this.setState({
            Data: nextProps.bottomData,
            timeChose: nextProps.timeChose,
        });
        this.updateAverage();//计算平均值
    }

    updateAverage = () => {
        for (let i = 0; i <= 2; i++) {
            const data = this.state.Data[i];
            if (!isNaN(data[2][0]) && !isNaN(data[2][1]) && data[2][0] != null && data[2][1] != null) {
                const weightAverage = this.state.weightAverage;
                weightAverage[i] = ((data[2][0] + data[2][1]) / 2).toFixed(1);
                this.setState({
                    weightAverage: weightAverage,
                })
            }
        }
    };

    render() {
        const columns = [
            {
                title: '1',
                width: '10%',
                key: '1',
                dataIndex: '1',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 0) {
                        obj.props.rowSpan = 2;
                    }
                    if (index === 1) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 2) {
                        obj.props.rowSpan = 2;
                    }
                    if (index === 3) {
                        obj.props.rowSpan = 0;
                    }
                    return obj;
                },
            }, {
                title: '2',
                width: '11.25%',
                key: '2',
                dataIndex: '2',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 0) {
                        obj.props.rowSpan = 2;
                        obj.props.colSpan = 2;
                    }
                    if (index === 1) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 2) {
                        obj.props.rowSpan = 2;
                        obj.props.colSpan = 2;

                    }
                    if (index === 3) {
                        obj.props.rowSpan = 0;
                    }
                    return obj;
                },
            }, {
                title: '3',
                width: '11.25%',
                key: '3',
                dataIndex: '3',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 0 || index === 1
                        || index === 2 || index === 3
                    ) {
                        obj.props.rowSpan = 0;
                    }
                    return obj;
                },
            }, {
                title: '4',
                width: '7.5%',
                key: '4',
                dataIndex: '4',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 0 || index === 2) {
                        obj.props.rowSpan = 2;
                    }
                    if (index === 1 || index === 3) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 4 || index === 5) {
                        obj.props.colSpan = 2;
                    }
                    return obj;
                },
            }, {
                title: '5',
                width: '15%',
                key: '5',
                dataIndex: '5',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 0 || index === 2) {
                        obj.props.rowSpan = 2;
                    }
                    if (index === 1 || index === 3
                        || index === 4 || index === 5) {
                        obj.props.rowSpan = 0;
                    }
                    return obj;
                },
            }, {
                title: '6',
                width: '7.5%',
                key: '6',
                dataIndex: '6'
            }, {
                title: '7',
                width: '7.5%',
                key: '7',
                dataIndex: '7'
            }, {
                title: '8',
                width: '7.5%',
                key: '8',
                dataIndex: '8'
            }, {
                title: '9',
                width: '7.5%',
                key: '9',
                dataIndex: '9',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 3) {
                        obj.props.rowSpan = 3;
                        obj.props.colSpan = 2;
                    }
                    if (index === 4) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 5) {
                        obj.props.rowSpan = 0;
                    }
                    return obj;
                },
            }, {
                title: '10',
                width: '15%',
                key: '10',
                dataIndex: '10',
                render(value, row, index) {
                    const obj = {
                        children: value,
                        props: {}
                    };
                    if (index === 3) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 4) {
                        obj.props.rowSpan = 0;
                    }
                    if (index === 5) {
                        obj.props.rowSpan = 0;
                    }
                    return obj;
                },
            }
        ];
        const {TextArea} = Input;
        const Data = this.state.Data[this.state.timeChose];
        const dataSource = [
            {
                1: '生料磨工',
                2: <TextArea rows={3} value={Data[0][0]}

                             style={{
                                 resize: "none"
                             }}
                />,
                4: '磨煤工',
                5: <TextArea rows={3} value={Data[0][1]}

                             style={{
                                 resize: "none"
                             }}
                />,
                6: '项目',
                7: '水分',
                8: '粒度',
                9: '水筛修正系数C',
                10: Data[3][0]//右边3行数据
            }, {
                6: '石灰石',
                7: Data[1][0],
                8: Data[1][1],
                9: '煤筛',
                10: Data[3][1]
            }, {
                1: '生料班长',
                2: <TextArea rows={3} value={Data[0][2]}
                             style={{
                                 resize: "none"
                             }}
                />,
                4: '磨煤班长',
                5: <TextArea rows={3} value={Data[0][3]}
                             style={{
                                 resize: "none"
                             }}
                />,
                6: '硅石',
                7: Data[1][2],
                8: Data[1][3],
                9: '外卖',
                10: Data[3][2]
            }, {
                6: '铁粉',
                7: Data[1][4],
                8: Data[1][5],
                9: <span>
                    备注：
                    <TextArea value={Data[4]} rows={5}
                              style={{
                                  resize: "none"
                              }}
                    />
                    </span>
            }, {
                1: '时间',
                2: this.state.timeChose * 8,
                3: this.state.timeChose * 8 + 7,
                4: '平均',
                6: '粉煤灰',
                7: Data[1][6],
                8: Data[1][7]
            }, {
                1: '立升重',
                2: Data[2][0],
                3: Data[2][1],
                4: this.state.weightAverage[this.state.timeChose],
                6: '烟煤',
                7: Data[1][8],
                8: Data[1][9],
            }
        ];

        return (
            <div className="bottom">
                <Table style={this.props.style} dataSource={dataSource} bordered columns={columns} pagination={false}
                       showHeader={false}/>
            </div>
        );
    }

}


export default class CKkzsysjl extends Component {
    render() {
        return (
            <Fragment>
                <div style={this.props.style}>
                    <h1 align="center">{this.props.title}</h1>
                    <span style={{float: "center", font: '20px', paddingLeft: 20}}>日期：{this.props.riqi}</span>
                    <span
                        style={{float: "center", font: '20px', paddingLeft: 20}}>班次：{this.props.timeChose * 8}点班</span>
                    {/*表单上半部分*/}
                    <UpperPartOfTheForm style={this.props.style} standard={this.props.zhibiao}
                                        timeChose={this.props.timeChose}
                                        person={this.props.person} upperData={this.props.upperData}
                    />
                    {/*表单下半部分*/}
                    <BottomPartOfTheForm style={this.props.style} standard={this.props.zhibiao}
                                         timeChose={this.props.timeChose}
                                         person={this.props.person} bottomData={this.props.bottomData}/>
                </div>

            </Fragment>
        );

    }
}


